Spaces:
Running
Running
Download index.html from DavidRyder/anycoder-954a00a7: direct link, hf CLI and curl.
- Browser
- Download file 39.8 kB
-
https://huggingface.co/spaces/DavidRyder/anycoder-954a00a7/resolve/main/index.html
- Command line
-
hf download hf://spaces/DavidRyder/anycoder-954a00a7/index.html
-
curl -L -o index.html https://huggingface.co/spaces/DavidRyder/anycoder-954a00a7/resolve/main/index.html
39.8 kB
| <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 ; } | |
| } | |
| /* 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 |