anycoder-954a00a7 / index.html
DavidRyder's picture
Upload folder using huggingface_hub
d80d0fa verified
Raw History Blame Contribute Delete
39.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>360 Degrees VR Games Center - POS Management System</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'orbitron': ['Orbitron', 'sans-serif'],
'rajdhani': ['Rajdhani', 'sans-serif'],
'inter': ['Inter', 'sans-serif'],
},
colors: {
'vr-dark': '#0a0a0f',
'vr-darker': '#050508',
'vr-panel': '#12121a',
'vr-card': '#1a1a24',
'vr-border': '#2a2a3a',
'vr-accent': '#00d4ff',
'vr-accent-dim': 'rgba(0, 212, 255, 0.1)',
'vr-purple': '#8b5cf6',
'vr-green': '#22c55e',
'vr-orange': '#f97316',
'vr-red': '#ef4444',
'vr-yellow': '#eab308',
'vr-pink': '#ec4899',
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'float': 'float 3s ease-in-out infinite',
'glow': 'glow 2s ease-in-out infinite alternate',
'slide-up': 'slideUp 0.4s ease-out',
'fade-in': 'fadeIn 0.3s ease-out',
'scale-in': 'scaleIn 0.3s ease-out',
'scan': 'scan 2s linear infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-8px)' },
},
glow: {
'0%': { boxShadow: '0 0 5px rgba(0, 212, 255, 0.3)' },
'100%': { boxShadow: '0 0 20px rgba(0, 212, 255, 0.6), 0 0 40px rgba(0, 212, 255, 0.2)' },
},
slideUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
scaleIn: {
'0%': { opacity: '0', transform: 'scale(0.9)' },
'100%': { opacity: '1', transform: 'scale(1)' },
},
scan: {
'0%': { transform: 'translateY(-100%)' },
'100%': { transform: 'translateY(100%)' },
}
}
}
}
}
</script>
<style>
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #0a0a0f;
}
::-webkit-scrollbar-thumb {
background: #2a2a3a;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #3a3a4a;
}
/* Glassmorphism */
.glass {
background: rgba(18, 18, 26, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-light {
background: rgba(26, 26, 36, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.04);
}
/* Neon Glow Effects */
.neon-text {
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.3);
}
.neon-border {
box-shadow: 0 0 10px rgba(0, 212, 255, 0.2), inset 0 0 10px rgba(0, 212, 255, 0.05);
}
.neon-purple {
box-shadow: 0 0 10px rgba(139, 92, 246, 0.2), inset 0 0 10px rgba(139, 92, 246, 0.05);
}
/* Grid Background */
.grid-bg {
background-image:
linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Holographic Card Effect */
.holo-card {
position: relative;
overflow: hidden;
}
.holo-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.08), transparent);
transition: left 0.6s ease;
}
.holo-card:hover::before {
left: 100%;
}
/* Receipt Paper Effect */
.receipt-paper {
background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
position: relative;
}
.receipt-paper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: repeating-linear-gradient(
45deg,
#ddd,
#ddd 2px,
transparent 2px,
transparent 4px
);
}
.receipt-paper::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: repeating-linear-gradient(
45deg,
#ddd,
#ddd 2px,
transparent 2px,
transparent 4px
);
}
/* Button Press Effect */
.btn-press:active {
transform: scale(0.96);
}
/* Loading Spinner */
.spinner {
border: 2px solid rgba(0, 212, 255, 0.1);
border-top: 2px solid #00d4ff;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Scan Line Effect */
.scan-line {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent);
animation: scan 3s linear infinite;
pointer-events: none;
}
/* Modal Backdrop */
.modal-backdrop {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
}
/* Input Focus Glow */
input:focus, select:focus, textarea:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.3);
}
/* Tooltip */
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #1a1a24;
color: #00d4ff;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
white-space: nowrap;
border: 1px solid rgba(0, 212, 255, 0.2);
z-index: 100;
}
/* Category Badge Colors */
.cat-vr { background: linear-gradient(135deg, #00d4ff, #0099cc); }
.cat-sim { background: linear-gradient(135deg, #22c55e, #16a34a); }
.cat-arc { background: linear-gradient(135deg, #f97316, #ea580c); }
.cat-rac { background: linear-gradient(135deg, #ec4899, #db2777); }
.cat-spt { background: linear-gradient(135deg, #eab308, #ca8a04); }
.cat-adv { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
/* Print Styles */
@media print {
body * { visibility: hidden; }
#printArea, #printArea * { visibility: visible; }
#printArea { position: absolute; left: 0; top: 0; width: 100%; }
.no-print { display: none !important; }
}
/* Status Indicator */
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.status-online { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.status-busy { background: #f97316; box-shadow: 0 0 6px #f97316; }
.status-offline { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
/* Number Counter Animation */
.counter {
font-variant-numeric: tabular-nums;
}
</style>
</head>
<body class="bg-vr-dark text-gray-200 font-inter min-h-screen grid-bg overflow-x-hidden">
<!-- ==================== LOGIN SCREEN ==================== -->
<div id="loginScreen" class="fixed inset-0 z-50 flex items-center justify-center bg-vr-dark">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-vr-accent/5 rounded-full blur-3xl"></div>
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-vr-purple/5 rounded-full blur-3xl"></div>
</div>
<div class="relative z-10 w-full max-w-md px-6">
<div class="text-center mb-10">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-vr-accent/20 to-vr-purple/20 border border-vr-accent/20 mb-6 animate-float">
<i class="fa-solid fa-vr-cardboard text-3xl text-vr-accent"></i>
</div>
<h1 class="font-orbitron text-3xl font-bold text-white mb-2 tracking-wider neon-text">360 DEGREES</h1>
<p class="font-rajdhani text-lg text-vr-accent/70 tracking-widest uppercase">VR Games Center</p>
<div class="mt-3 flex items-center justify-center gap-2">
<span class="status-dot status-online"></span>
<span class="text-xs text-gray-500">System Online</span>
</div>
</div>
<div class="glass rounded-2xl p-8 space-y-5">
<div>
<label class="block text-xs text-gray-400 uppercase tracking-wider mb-2 font-rajdhani font-semibold">Username</label>
<input type="text" id="loginUsername" placeholder="Enter username" class="w-full bg-vr-darker border border-vr-border rounded-xl px-4 py-3 text-white placeholder-gray-600 transition-all focus:border-vr-accent" value="admin">
</div>
<div>
<label class="block text-xs text-gray-400 uppercase tracking-wider mb-2 font-rajdhani font-semibold">Password</label>
<input type="password" id="loginPassword" placeholder="Enter password" class="w-full bg-vr-darker border border-vr-border rounded-xl px-4 py-3 text-white placeholder-gray-600 transition-all focus:border-vr-accent" value="admin123">
</div>
<div>
<label class="block text-xs text-gray-400 uppercase tracking-wider mb-2 font-rajdhani font-semibold">Select Role</label>
<select id="loginRole" class="w-full bg-vr-darker border border-vr-border rounded-xl px-4 py-3 text-white transition-all focus:border-vr-accent cursor-pointer">
<option value="admin">Administrator</option>
<option value="cashier">Cashier</option>
<option value="manager">Manager</option>
</select>
</div>
<button onclick="handleLogin()" class="w-full bg-gradient-to-r from-vr-accent to-cyan-600 text-vr-dark font-bold py-3.5 rounded-xl hover:shadow-lg hover:shadow-vr-accent/20 transition-all btn-press font-orbitron tracking-wider">
<i class="fa-solid fa-right-to-bracket mr-2"></i>LOGIN
</button>
<p id="loginError" class="text-vr-red text-sm text-center hidden"><i class="fa-solid fa-circle-exclamation mr-1"></i>Invalid credentials</p>
</div>
<p class="text-center text-xs text-gray-600 mt-6">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-vr-accent hover:underline">anycoder</a></p>
</div>
</div>
<!-- ==================== MAIN APP ==================== -->
<div id="mainApp" class="hidden min-h-screen flex flex-col">
<!-- Top Navigation Bar -->
<nav class="glass sticky top-0 z-40 border-b border-vr-border/50">
<div class="max-w-[1600px] mx-auto px-4 sm:px-6">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-vr-accent/20 to-vr-purple/20 border border-vr-accent/20 flex items-center justify-center">
<i class="fa-solid fa-vr-cardboard text-vr-accent text-lg"></i>
</div>
<div>
<h1 class="font-orbitron text-sm font-bold text-white tracking-wider">360 DEGREES</h1>
<p class="text-[10px] text-vr-accent/60 font-rajdhani tracking-widest uppercase">VR Games Center</p>
</div>
</div>
<!-- Center Nav Links -->
<div class="hidden md:flex items-center gap-1">
<button onclick="navigateTo('dashboard')" id="nav-dashboard" class="nav-btn px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 text-vr-accent bg-vr-accent/10">
<i class="fa-solid fa-chart-pie"></i> Dashboard
</button>
<button onclick="navigateTo('pos')" id="nav-pos" class="nav-btn px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 text-gray-400 hover:text-white hover:bg-white/5">
<i class="fa-solid fa-cash-register"></i> POS
</button>
<button onclick="navigateTo('games')" id="nav-games" class="nav-btn px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 text-gray-400 hover:text-white hover:bg-white/5">
<i class="fa-solid fa-gamepad"></i> Games
</button>
<button onclick="navigateTo('reports')" id="nav-reports" class="nav-btn px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 text-gray-400 hover:text-white hover:bg-white/5">
<i class="fa-solid fa-file-lines"></i> Reports
</button>
<button onclick="navigateTo('users')" id="nav-users" class="nav-btn px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 text-gray-400 hover:text-white hover:bg-white/5">
<i class="fa-solid fa-users-gear"></i> Users
</button>
</div>
<!-- Right Side -->
<div class="flex items-center gap-3">
<!-- Mobile Menu Toggle -->
<button onclick="toggleMobileMenu()" class="md:hidden w-9 h-9 rounded-lg bg-vr-card border border-vr-border flex items-center justify-center text-gray-400 hover:text-white">
<i class="fa-solid fa-bars"></i>
</button>
<!-- Date/Time -->
<div class="hidden lg:flex flex-col items-end mr-2">
<span id="headerTime" class="text-sm font-orbitron text-vr-accent font-bold">00:00:00</span>
<span id="headerDate" class="text-[10px] text-gray-500 font-rajdhani">---</span>
</div>
<!-- User -->
<div class="flex items-center gap-3 pl-3 border-l border-vr-border/50">
<div class="text-right hidden sm:block">
<p id="userNameDisplay" class="text-sm font-semibold text-white">Admin</p>
<p id="userRoleDisplay" class="text-[10px] text-vr-accent font-rajdhani uppercase tracking-wider">Administrator</p>
</div>
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-vr-accent to-vr-purple flex items-center justify-center text-vr-dark font-bold text-sm">
<i class="fa-solid fa-user"></i>
</div>
<button onclick="logout()" class="w-9 h-9 rounded-lg bg-vr-card border border-vr-border flex items-center justify-center text-gray-400 hover:text-vr-red hover:border-vr-red/30 transition-all" title="Logout">
<i class="fa-solid fa-power-off text-sm"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden md:hidden border-t border-vr-border/50 bg-vr-panel">
<div class="px-4 py-3 space-y-1">
<button onclick="navigateTo('dashboard'); toggleMobileMenu()" class="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-vr-accent bg-vr-accent/10 flex items-center gap-3">
<i class="fa-solid fa-chart-pie w-5"></i> Dashboard
</button>
<button onclick="navigateTo('pos'); toggleMobileMenu()" class="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 flex items-center gap-3">
<i class="fa-solid fa-cash-register w-5"></i> POS
</button>
<button onclick="navigateTo('games'); toggleMobileMenu()" class="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 flex items-center gap-3">
<i class="fa-solid fa-gamepad w-5"></i> Games
</button>
<button onclick="navigateTo('reports'); toggleMobileMenu()" class="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 flex items-center gap-3">
<i class="fa-solid fa-file-lines w-5"></i> Reports
</button>
<button onclick="navigateTo('users'); toggleMobileMenu()" class="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 flex items-center gap-3">
<i class="fa-solid fa-users-gear w-5"></i> Users
</button>
</div>
</div>
</nav>
<!-- Main Content Area -->
<main class="flex-1 max-w-[1600px] w-full mx-auto px-4 sm:px-6 py-6">
<!-- ==================== DASHBOARD VIEW ==================== -->
<div id="view-dashboard" class="view-section space-y-6 animate-fade-in">
<!-- Stats Row -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="glass-light rounded-2xl p-5 holo-card group">
<div class="flex items-center justify-between mb-3">
<div class="w-10 h-10 rounded-xl bg-vr-accent/10 flex items-center justify-center group-hover:bg-vr-accent/20 transition-colors">
<i class="fa-solid fa-wallet text-vr-accent"></i>
</div>
<span class="text-[10px] text-gray-500 font-rajdhani uppercase tracking-wider">Today</span>
</div>
<p class="text-2xl font-orbitron font-bold text-white counter" id="dashRevenue">$0.00</p>
<p class="text-xs text-gray-500 mt-1">Total Revenue</p>
<div class="mt-3 h-1 bg-vr-border rounded-full overflow-hidden">
<div class="h-full bg-vr-accent rounded-full" style="width: 78%"></div>
</div>
</div>
<div class="glass-light rounded-2xl p-5 holo-card group">
<div class="flex items-center justify-between mb-3">
<div class="w-10 h-10 rounded-xl bg-vr-purple/10 flex items-center justify-center group-hover:bg-vr-purple/20 transition-colors">
<i class="fa-solid fa-ticket text-vr-purple"></i>
</div>
<span class="text-[10px] text-gray-500 font-rajdhani uppercase tracking-wider">Today</span>
</div>
<p class="text-2xl font-orbitron font-bold text-white counter" id="dashTransactions">0</p>
<p class="text-xs text-gray-500 mt-1">Transactions</p>
<div class="mt-3 h-1 bg-vr-border rounded-full overflow-hidden">
<div class="h-full bg-vr-purple rounded-full" style="width: 65%"></div>
</div>
</div>
<div class="glass-light rounded-2xl p-5 holo-card group">
<div class="flex items-center justify-between mb-3">
<div class="w-10 h-10 rounded-xl bg-vr-green/10 flex items-center justify-center group-hover:bg-vr-green/20 transition-colors">
<i class="fa-solid fa-gamepad text-vr-green"></i>
</div>
<span class="text-[10px] text-gray-500 font-rajdhani uppercase tracking-wider">Active</span>
</div>
<p class="text-2xl font-orbitron font-bold text-white" id="dashActiveGames">0</p>
<p class="text-xs text-gray-500 mt-1">Games Available</p>
<div class="mt-3 h-1 bg-vr-border rounded-full overflow-hidden">
<div class="h-full bg-vr-green rounded-full" style="width: 92%"></div>
</div>
</div>
<div class="glass-light rounded-2xl p-5 holo-card group">
<div class="flex items-center justify-between mb-3">
<div class="w-10 h-10 rounded-xl bg-vr-orange/10 flex items-center justify-center group-hover:bg-vr-orange/20 transition-colors">
<i class="fa-solid fa-users text-vr-orange"></i>
</div>
<span class="text-[10px] text-gray-500 font-rajdhani uppercase tracking-wider">Today</span>
</div>
<p class="text-2xl font-orbitron font-bold text-white counter" id="dashCustomers">0</p>
<p class="text-xs text-gray-500 mt-1">Customers</p>
<div class="mt-3 h-1 bg-vr-border rounded-full overflow-hidden">
<div class="h-full bg-vr-orange rounded-full" style="width: 54%"></div>
</div>
</div>
</div>
<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="lg:col-span-2 glass-light rounded-2xl p-5">
<div class="flex items-center justify-between mb-4">
<h3 class="font-orbitron text-sm font-bold text-white tracking-wider"><i class="fa-solid fa-chart-line text-vr-accent mr-2"></i>Revenue Trend</h3>
<div class="flex gap-2">
<button onclick="updateChartPeriod('daily')" class="period-btn px-3 py-1 rounded-lg text-[10px] font-rajdhani font-bold uppercase tracking-wider bg-vr-accent text-vr-dark">Daily</button>
<button onclick="updateChartPeriod('weekly')" class="period-btn px-3 py-1 rounded-lg text-[10px] font-rajdhani font-bold uppercase tracking-wider text-gray-400 hover:text-white hover:bg-white/5">Weekly</button>
<button onclick="updateChartPeriod('monthly')" class="period-btn px-3 py-1 rounded-lg text-[10px] font-rajdhani font-bold uppercase tracking-wider text-gray-400 hover:text-white hover:bg-white/5">Monthly</button>
</div>
</div>
<div class="relative h-64">
<canvas id="revenueChart"></canvas>
</div>
</div>
<div class="glass-light rounded-2xl p-5">
<h3 class="font-orbitron text-sm font-bold text-white tracking-wider mb-4"><i class="fa-solid fa-trophy text-vr-yellow mr-2"></i>Top Games</h3>
<div class="relative h-64">
<canvas id="topGamesChart"></canvas>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="glass-light rounded-2xl p-5">
<div class="flex items-center justify-between mb-4">
<h3 class="font-orbitron text-sm font-bold text-white tracking-wider"><i class="fa-solid fa-clock-rotate-left text-vr-purple mr-2"></i>Recent Transactions</h3>
<button onclick="navigateTo('reports')" class="text-xs text-vr-accent hover:underline font-rajdhani">View All</button>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b border-vr-border/50">
<th class="text-left text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">ID</th>
<th class="text-left text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">Customer</th>
<th class="text-left text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">Game</th>
<th class="text-left text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">Time</th>
<th class="text-right text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">Amount</th>
<th class="text-center text-[10px] text-gray-500 uppercase tracking-wider font-rajdhani font-bold pb-3">Status</th>
</tr>
</thead>
<tbody id="recentTransactionsBody" class="text-sm"></tbody>
</table>
</div>
</div>
</div>
<!-- ==================== POS VIEW ==================== -->
<div id="view-pos" class="view-section hidden h-[calc(100vh-120px)]">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4 h-full">
<!-- Games Grid -->
<div class="lg:col-span-8 flex flex-col h-full">
<div class="glass-light rounded-2xl p-4 mb-4 flex items-center gap-3 flex-wrap">
<div class="relative flex-1 min-w-[200px]">
<i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
<input type="text" id="posSearch" placeholder="Search games..." oninput="filterPosGames()" class="w-full bg-vr-darker border border-vr-border rounded-xl pl-10 pr-4 py-2.5 text-sm text-white placeholder-gray-600 focus:border-vr-accent transition-all">
</div>
<select id="posCategoryFilter" onchange="filterPosGames()" class="bg-vr-darker border border-vr-border rounded-xl px-4 py-2.5 text-sm text-white focus:border-vr-accent transition-all cursor-pointer">
<option value="all">All Categories</option>
<option value="VR">VR Experience</option>
<option value="Simulator">Simulator</option>
<option value="Arcade">Arcade</option>
<option value="Racing">Racing</option>
<option value="Sports">Sports</option>
<option value="Adventure">Adventure</option>
</select>
</div>
<div class="flex-1 overflow-y-auto pr-1">
<div id="posGamesGrid" class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-3"></div>
</div>
</div>
<!-- Cart Panel -->
<div class="lg:col-span-4 flex flex-col h-full">
<div class="glass-light rounded-2xl flex flex-col h-full overflow-hidden">
<div class="p-4 border-b border-vr-border/50">
<h3 class="font-orbitron text-sm font-bold text-white tracking-wider flex items-center gap-2">
<i class="fa-solid fa-cart-shopping text-vr-accent"></i> Current Order
</h3>
</div>
<div id="cartItems" class="flex-1 overflow-y-auto p-4 space-y-2"></div>
<div class="p-4 border-t border-vr-border/50 space-y-3">
<div class="flex justify-between text-sm">
<span class="text-gray-400">Subtotal</span>
<span class="font-orbitron text-white" id="cartSubtotal">$0.00</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-400">Tax (8%)</span>
<span class="font-orbitron text-white" id="cartTax">$0.00</span>
</div>
<div class="flex justify-between text-lg font-bold border-t border-vr-border/50 pt-3">
<span class="text-white">Total</span>
<span class="font-orbitron text-vr-accent" id="cartTotal">$0.00</span>
</div>
<div class="grid grid-cols-2 gap-2">
<button onclick="clearCart()" class="px-4 py-3 rounded-xl border border-vr-border text-gray-400 hover:text-white hover:border-vr-red/50 hover:bg-vr-red/10 transition-all text-sm font-medium btn-press">
<i class="fa-solid fa-trash-can mr-1"></i> Clear
</button>
<button onclick="openCheckout()" id="checkoutBtn" class="px-4 py-3 rounded-xl bg-gradient-to-r from-vr-accent to-cyan-600 text-vr-dark font-bold hover:shadow-lg hover:shadow-vr-accent/20 transition-all text-sm btn-press font-orbitron tracking-wider disabled:opacity-50 disabled:cursor-not-allowed">
<i class="fa-solid fa-credit-card mr-1"></i> Checkout
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==================== GAMES VIEW ==================== -->
<div id="view-games" class="view-section hidden space-y-6 animate-fade-in">
<div class="flex items-center justify-between flex-wrap gap-4">
<div>
<h2 class="font-orbitron text-xl font-bold text-white tracking-wider">Game Management</h2>
<p class="text-sm text-gray-500 font-rajdhani">Manage your arcade games and pricing</p>
</div>
<button onclick="openGameModal()" class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-vr-accent to-cyan-600 text-vr-dark font-bold text-sm hover:shadow-lg hover:shadow-vr-accent/20 transition-all btn-press font-orbitron tracking-wider">
<i class="fa-solid fa-plus mr-2"></i>Add Game
</button>
</div>
<div class="glass-light rounded-2xl p-4 flex items-center gap-3 flex-wrap">
<div class="relative flex-1 min-w-[250px]">
<i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
<input type="text" id="gamesSearch" placeholder="Search games..." oninput="renderGames()" class="w-full bg-vr-darker border border-vr-border rounded-xl pl-10 pr-4 py-2.5 text-sm text-white placeholder-gray-600 focus:border-vr-accent transition-all">
</div>
<select id="gamesCategoryFilter" onchange="renderGames()" class="bg-vr-darker border border-vr-border rounded-xl px-4 py-2.5 text-sm text-white focus:border-vr-accent transition-all cursor-pointer">
<option value="all">All Categories</option>
<option value="VR">VR Experience</option>
<option value="Simulator">Simulator</option>
<option value="Arcade">Arcade</option>
<option value="Racing">Racing</option>
<option value="Sports">Sports</option>
<option value="Adventure">Adventure</option>
</select>
</div>
<div id="gamesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"></div>
</div>
<!-- ==================== REPORTS VIEW ==================== -->
<div id="view-reports" class="view-section hidden space-y-6 animate-fade-in">
<div class="flex items-center justify-between flex-wrap gap-4">
<div>
<h2 class="font-orbitron text-xl font-bold text-white tracking-wider">Reports & Analytics</h2>
<p class="text-sm text-gray-500 font-rajdhani">Generate and export business reports</p>
</div>
<div class="flex gap-2">
<button onclick="exportReport('pdf')" class="px-4 py-2.5 rounded-xl border border-vr-red/30 text-vr-red hover:bg-vr-red/10 transition-all text-sm font-medium btn-press">
<i class="fa-solid fa-file-pdf mr-2"></i>Export PDF
</button>
<button onclick="exportReport('csv')" class="px-4 py-2.5 rounded-xl border border-vr-green/30 text-vr-green hover:bg-vr-green/10 transition-all text-sm font-medium btn-press">
<i class="fa-solid fa-file-csv mr-2"></i>Export CSV
</button>
</div>
</div>
<div class="glass-light rounded-2xl p-4 flex items-center gap-3 flex-wrap">
<select id="reportType" onchange="generateReport()" class="bg-vr-darker border border-vr-border rounded-xl px-4 py-2.5 text-sm text-white focus:border-vr-accent transition-all cursor-pointer">
<option value="daily">Daily Report</option>
<option value="weekly">Weekly Report</option>
<option value="monthly">Monthly Report</option>
<option value="custom">Custom Range</option>
</select>
<input type="date" id="reportDateFrom" onchange="generateReport()" class="bg-vr-darker border border-vr-border rounded-xl px-4 py-2.5 text-sm text-white focus:border-vr-accent transition-all">
<input type="date" id="reportDateTo" onchange="generateReport()" class="bg-vr-darker border border-vr-border rounded-xl px-4 py-2.5 text-sm text-white focus:border-vr-accent transition-all">
<button onclick="generateReport()" class="px-4 py-2.5 rounded-xl bg-vr-accent/10 text-vr-accent border border-vr-accent/20 hover:bg-vr-accent/20 transition-all text-sm font-medium btn-press">
<i class="fa-solid fa-rotate mr-1"></i> Refresh
</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="glass-light rounded-2xl p-5">
<div class="flex items-center justify-between mb-3">
<div class="w-10 h-10 rounded-xl bg-vr-accent/10 flex items-center justify-center">
<i class="fa-solid fa-sack-dollar text-vr-accent"></i>
</div>
</div>
<p class="text-2xl font-orbitron font-bold text-white" id="reportRevenue">$0.00</p>
<p class="text-xs text-gray-500 mt-1">Total Revenue</p>
</div>
<div class="glass-light rounded-2xl p-5">
<div class="flex items-center justify-between mb-3">
<div class="w-10 h-10 rounded-xl bg-vr-orange/10 flex items-center justify-center">
<i class="fa-solid fa-money-bill-transfer text-vr-orange"></i>
</div>
</div>
<p class="text-2xl font-orbitron