Spaces:

Xcronious
/

chipflow-commander

Running

App Files Files Community

Xcronious commited on Oct 13, 2025

Commit

e1c3d9f

verified ·

1 Parent(s): f93b226

Manual changes saved

Browse files

Files changed (3) hide show

admin_dashboard.html +71 -196
customer_topup.html +26 -52
withdraw.html +29 -69

admin_dashboard.html CHANGED Viewed

@@ -3,220 +3,95 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ChipFlow Commander - Admin Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
 <body class="bg-gray-100">
-    <div class="flex h-screen">
-        <!-- Sidebar -->
-        <div class="w-64 bg-gray-800 text-white">
-            <div class="p-4 border-b border-gray-700">
-                <h1 class="text-xl font-bold">ChipFlow Commander</h1>
-                <p class="text-sm text-gray-400">Admin Dashboard</p>
             </div>
-            <nav class="mt-4">
-                <a href="#" class="block py-2 px-4 bg-gray-700 text-white">Dashboard</a>
-                <a href="#" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Users</a>
-                <a href="#" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Transactions</a>
-                <a href="#" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Chips Management</a>
-                <a href="#" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Settings</a>
-                <a href="/index.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700 mt-8">Back to Home</a>
-            </nav>
-        </div>
-        <!-- Main Content -->
-        <div class="flex-1 overflow-auto">
-            <header class="bg-white shadow-sm p-4">
-                <div class="flex justify-between items-center">
-                    <h2 class="text-xl font-semibold text-gray-800">Dashboard Overview</h2>
-                    <div class="flex items-center space-x-4">
-                        <span class="text-gray-600">Admin</span>
-                        <div class="w-8 h-8 bg-blue-500 rounded-full"></div>
-                    </div>
                 </div>
-            </header>
-            <main class="p-6">
-                <!-- Stats Cards -->
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-blue-100 text-blue-600">
-                                <i data-feather="users"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-500">Total Users</p>
-                                <p class="text-2xl font-semibold text-gray-800">1,248</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-green-100 text-green-600">
-                                <i data-feather="dollar-sign"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-500">Today's Revenue</p>
-                                <p class="text-2xl font-semibold text-gray-800">$12,846</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-purple-100 text-purple-600">
-                                <i data-feather="activity"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-500">Active Sessions</p>
-                                <p class="text-2xl font-semibold text-gray-800">342</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
-                                <i data-feather="alert-circle"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-500">Pending Issues</p>
-                                <p class="text-2xl font-semibold text-gray-800">8</p>
-                            </div>
-                        </div>
-                    </div>
                 </div>
-                <!-- Charts -->
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <h3 class="text-lg font-medium text-gray-800 mb-4">Revenue Overview</h3>
-                        <canvas id="revenueChart" height="250"></canvas>
-                    </div>
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <h3 class="text-lg font-medium text-gray-800 mb-4">User Activity</h3>
-                        <canvas id="activityChart" height="250"></canvas>
-                    </div>
                 </div>
-                <!-- Recent Transactions -->
-                <div class="bg-white rounded-lg shadow mt-6">
-                    <div class="p-6 border-b border-gray-200">
-                        <h3 class="text-lg font-medium text-gray-800">Recent Transactions</h3>
-                    </div>
-                    <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
-                                <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white divide-y divide-gray-200">
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">#TRX-78945</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">$125.00</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Top Up</td>
-                                    <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completed</span></td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">#TRX-78944</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Jane Smith</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">$75.00</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Withdrawal</td>
-                                    <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span></td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">#TRX-78943</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Robert Johnson</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">$200.00</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Top Up</td>
-                                    <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completed</span></td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">#TRX-78942</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Emily Davis</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">$150.00</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Withdrawal</td>
-                                    <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Rejected</span></td>
-                                </tr>
-                            </tbody>
-                        </table>
                     </div>
                 </div>
-            </main>
         </div>
     </div>
     <script>
-        // Initialize feather icons
-        feather.replace();
-        // Charts initialization
-        document.addEventListener('DOMContentLoaded', function() {
-            // Revenue Chart
-            const revenueCtx = document.getElementById('revenueChart').getContext('2d');
-            new Chart(revenueCtx, {
-                type: 'line',
-                data: {
-                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
-                    datasets: [{
-                        label: 'Revenue',
-                        data: [12000, 19000, 3000, 5000, 2000, 3000, 45000],
-                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                        borderColor: 'rgba(59, 130, 246, 1)',
-                        borderWidth: 2,
-                        tension: 0.4,
-                        fill: true
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: {
-                            display: false
-                        }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true
-                        }
-                    }
-                }
-            });
-            // Activity Chart
-            const activityCtx = document.getElementById('activityChart').getContext('2d');
-            new Chart(activityCtx, {
-                type: 'bar',
-                data: {
-                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-                    datasets: [{
-                        label: 'Active Users',
-                        data: [320, 150, 280, 400, 350, 420, 380],
-                        backgroundColor: 'rgba(124, 58, 237, 0.7)',
-                        borderColor: 'rgba(124, 58, 237, 1)',
-                        borderWidth: 1
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: {
-                            display: false
-                        }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true
-                        }
-                    }
                 }
-            });
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChipFlow Commander - Top Up</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body class="bg-gray-100">
+    <div class="container py-8">
+        <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
+            <div class="text-center mb-6">
+                <h1 class="text-2xl font-bold text-gray-800">🔋 Chip Top Up</h1>
+                <p class="text-gray-600">Fill the form below to recharge your chips</p>
             </div>
+            <form id="topupForm">
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">Game ID</label>
+                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
                 </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">Player Name</label>
+                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Your in-game name" required>
                 </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">WhatsApp Number</label>
+                    <input type="tel" class="w-full px-3 py-2 border rounded-lg" placeholder="+62..." required>
                 </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">Amount (Rp)</label>
+                    <input type="number" id="amountInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter amount" min="10000" required>
+                    <p class="text-xs text-gray-500 mt-1">Minimum Rp10,000</p>
+                </div>
+                <div class="mb-6">
+                    <label class="block text-gray-700 mb-2">Payment Method</label>
+                    <select class="w-full px-3 py-2 border rounded-lg" required>
+                        <option value="">Select payment</option>
+                        <option>Bank Transfer</option>
+                        <option>QRIS</option>
+                        <option>E-Wallet</option>
+                    </select>
+                </div>
+                <div class="bg-blue-50 p-4 rounded-lg mb-6">
+                    <h3 class="text-lg font-semibold text-blue-800 mb-2">You will receive:</h3>
+                    <div class="flex justify-between items-center">
+                        <span class="text-gray-700">Chips:</span>
+                        <span id="chipResult" class="text-2xl font-bold text-blue-600">0.00</span>
                     </div>
+                    <div class="text-xs text-gray-500 mt-2" id="rateInfo"></div>
                 </div>
+                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-bold transition">
+                    Proceed to Payment
+                </button>
+            </form>
+            <div class="mt-6 text-center text-sm text-gray-500">
+                <p>Need help? <a href="#" class="text-blue-600">Contact Support</a></p>
+            </div>
         </div>
     </div>
     <script>
+        document.getElementById('amountInput').addEventListener('input', function() {
+            const amount = parseFloat(this.value) || 0;
+            let chips = 0;
+            let rateText = '';
+            if (amount >= 1300000) {
+                chips = amount / 63000;
+                rateText = 'Wholesale rate: Rp63,000/chip';
+            } else if (amount >= 650000) {
+                chips = amount / 64500;
+                rateText = 'Wholesale rate: Rp64,500/chip';
+            } else if (amount >= 65000) {
+                chips = amount / 65000;
+                rateText = 'Wholesale rate: Rp65,000/chip';
+            } else {
+                // Fractional calculation
+                if (amount >= 10000) {
+                    chips = amount * 0.000012; // Example fractional rate
+                    rateText = 'Fractional chip rate applied';
                 }
+            }
+            document.getElementById('chipResult').textContent = chips.toFixed(2);
+            document.getElementById('rateInfo').textContent = rateText;
         });
     </script>
 </body>

customer_topup.html CHANGED Viewed

@@ -3,95 +3,69 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ChipFlow Commander - Top Up</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body class="bg-gray-100">
     <div class="container py-8">
         <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
             <div class="text-center mb-6">
-                <h1 class="text-2xl font-bold text-gray-800">🔋 Chip Top Up</h1>
-                <p class="text-gray-600">Fill the form below to recharge your chips</p>
             </div>
-            <form id="topupForm">
                 <div class="mb-4">
                     <label class="block text-gray-700 mb-2">Game ID</label>
                     <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
                 </div>
                 <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Player Name</label>
-                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Your in-game name" required>
                 </div>
                 <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">WhatsApp Number</label>
-                    <input type="tel" class="w-full px-3 py-2 border rounded-lg" placeholder="+62..." required>
                 </div>
                 <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Amount (Rp)</label>
-                    <input type="number" id="amountInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter amount" min="10000" required>
-                    <p class="text-xs text-gray-500 mt-1">Minimum Rp10,000</p>
                 </div>
-                <div class="mb-6">
-                    <label class="block text-gray-700 mb-2">Payment Method</label>
-                    <select class="w-full px-3 py-2 border rounded-lg" required>
-                        <option value="">Select payment</option>
-                        <option>Bank Transfer</option>
-                        <option>QRIS</option>
-                        <option>E-Wallet</option>
-                    </select>
                 </div>
-                <div class="bg-blue-50 p-4 rounded-lg mb-6">
-                    <h3 class="text-lg font-semibold text-blue-800 mb-2">You will receive:</h3>
                     <div class="flex justify-between items-center">
-                        <span class="text-gray-700">Chips:</span>
-                        <span id="chipResult" class="text-2xl font-bold text-blue-600">0.00</span>
                     </div>
-                    <div class="text-xs text-gray-500 mt-2" id="rateInfo"></div>
                 </div>
-                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-bold transition">
-                    Proceed to Payment
                 </button>
             </form>
             <div class="mt-6 text-center text-sm text-gray-500">
-                <p>Need help? <a href="#" class="text-blue-600">Contact Support</a></p>
             </div>
         </div>
     </div>
     <script>
-        document.getElementById('amountInput').addEventListener('input', function() {
-            const amount = parseFloat(this.value) || 0;
-            let chips = 0;
-            let rateText = '';
-            if (amount >= 1300000) {
-                chips = amount / 63000;
-                rateText = 'Wholesale rate: Rp63,000/chip';
-            } else if (amount >= 650000) {
-                chips = amount / 64500;
-                rateText = 'Wholesale rate: Rp64,500/chip';
-            } else if (amount >= 65000) {
-                chips = amount / 65000;
-                rateText = 'Wholesale rate: Rp65,000/chip';
-            } else {
-                // Fractional calculation
-                if (amount >= 10000) {
-                    chips = amount * 0.000012; // Example fractional rate
-                    rateText = 'Fractional chip rate applied';
-                }
-            }
-            document.getElementById('chipResult').textContent = chips.toFixed(2);
-            document.getElementById('rateInfo').textContent = rateText;
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChipFlow Commander - Withdraw</title>
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="bg-gray-100">
     <div class="container py-8">
         <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
             <div class="text-center mb-6">
+                <h1 class="text-2xl font-bold text-gray-800">🏧 Chip Withdrawal</h1>
+                <p class="text-gray-600">Convert your chips to real money</p>
             </div>
+            <form id="withdrawForm">
                 <div class="mb-4">
                     <label class="block text-gray-700 mb-2">Game ID</label>
                     <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
                 </div>
                 <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">Chip Amount</label>
+                    <input type="number" id="chipInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter chip amount" min="100" required>
+                    <p class="text-xs text-gray-500 mt-1">Minimum 100 chips</p>
                 </div>
                 <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">Bank Account</label>
+                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Account number" required>
                 </div>
                 <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">Bank Name</label>
+                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Bank name" required>
                 </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">Account Holder Name</label>
+                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Name on bank account" required>
                 </div>
+                <div class="bg-green-50 p-4 rounded-lg mb-6">
+                    <h3 class="text-lg font-semibold text-green-800 mb-2">You will receive:</h3>
                     <div class="flex justify-between items-center">
+                        <span class="text-gray-700">Amount (Rp):</span>
+                        <span id="cashResult" class="text-2xl font-bold text-green-600">0</span>
                     </div>
+                    <div class="text-xs text-gray-500 mt-2">Rate: Rp65,000 per chip</div>
                 </div>
+                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-bold transition">
+                    Request Withdrawal
                 </button>
             </form>
             <div class="mt-6 text-center text-sm text-gray-500">
+                <p>Processing time: 1-3 business days</p>
             </div>
         </div>
     </div>
     <script>
+        document.getElementById('chipInput').addEventListener('input', function() {
+            const chips = parseInt(this.value) || 0;
+            const cash = chips * 65000;
+            document.getElementById('cashResult').textContent = cash.toLocaleString();
         });
     </script>
 </body>

withdraw.html CHANGED Viewed

@@ -1,72 +1,32 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ChipFlow Commander - Withdraw</title>
     <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body class="bg-gray-100">
-    <div class="container py-8">
-        <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
-            <div class="text-center mb-6">
-                <h1 class="text-2xl font-bold text-gray-800">🏧 Chip Withdrawal</h1>
-                <p class="text-gray-600">Convert your chips to real money</p>
-            </div>
-            <form id="withdrawForm">
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Game ID</label>
-                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
-                </div>
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Chip Amount</label>
-                    <input type="number" id="chipInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter chip amount" min="100" required>
-                    <p class="text-xs text-gray-500 mt-1">Minimum 100 chips</p>
-                </div>
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Bank Account</label>
-                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Account number" required>
-                </div>
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Bank Name</label>
-                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Bank name" required>
-                </div>
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Account Holder Name</label>
-                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Name on bank account" required>
-                </div>
-                <div class="bg-green-50 p-4 rounded-lg mb-6">
-                    <h3 class="text-lg font-semibold text-green-800 mb-2">You will receive:</h3>
-                    <div class="flex justify-between items-center">
-                        <span class="text-gray-700">Amount (Rp):</span>
-                        <span id="cashResult" class="text-2xl font-bold text-green-600">0</span>
-                    </div>
-                    <div class="text-xs text-gray-500 mt-2">Rate: Rp65,000 per chip</div>
-                </div>
-                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-bold transition">
-                    Request Withdrawal
-                </button>
-            </form>
-            <div class="mt-6 text-center text-sm text-gray-500">
-                <p>Processing time: 1-3 business days</p>
-            </div>
-        </div>
     </div>
-    <script>
-        document.getElementById('chipInput').addEventListener('input', function() {
-            const chips = parseInt(this.value) || 0;
-            const cash = chips * 65000;
-            document.getElementById('cashResult').textContent = cash.toLocaleString();
-        });
-    </script>
-</body>
-</html>

 <!DOCTYPE html>
+<html>
+  <head>
+    <title>My app</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8">
     <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
+    <div class="w-full max-w-md mx-auto bg-white rounded-xl shadow-md p-8">
+      <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">ChipFlow Commander</h1>
+      <div class="space-y-4">
+        <a href="/customer_topup.html" class="block w-full bg-blue-600 hover:bg-blue-700 text-white text-center py-3 px-6 rounded-lg font-bold transition">
+          💰 Top Up Chips
+        </a>
+        <a href="/withdraw.html" class="block w-full bg-green-600 hover:bg-green-700 text-white text-center py-3 px-6 rounded-lg font-bold transition">
+          🏧 Withdraw Chips
+        </a>
+        <a href="/transactions.html" class="block w-full bg-purple-600 hover:bg-purple-700 text-white text-center py-3 px-6 rounded-lg font-bold transition">
+          🔍 Check Transaction
+        </a>
+<div class="pt-4 border-t border-gray-200">
+          <a href="/admin_login.html" class="block w-full bg-gray-800 hover:bg-gray-900 text-white text-center py-3 px-6 rounded-lg font-bold transition">
+            👑 Admin Login
+          </a>
+</div>
+      </div>
     </div>
+<script></script>
+  </body>
+</html>