<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hostinger Database Connection Test</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen p-4 font-sans">
    <div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-6 border border-slate-200">
        <h2 class="text-xl font-bold text-slate-800 mb-2">Hostinger Database Test</h2>
        <p class="text-xs text-slate-500 mb-6">Test connection for khaja.store MySQL database</p>

                    <div class="bg-emerald-50 border border-emerald-200 text-emerald-800 p-4 rounded-xl mb-4">
                <div class="flex items-center space-x-2 font-bold mb-1">
                    <span class="text-lg">✅</span>
                    <span>Database Connected Successfully!</span>
                </div>
                <p class="text-xs text-emerald-700">Hostinger MySQL database se connection bilkul theek hai.</p>
            </div>

            <div class="mt-4">
                <h3 class="text-xs font-semibold uppercase text-slate-500 tracking-wider mb-2">Tables Found:</h3>
                                    <ul class="space-y-1">
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">activity_balance_history</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">cash_entries</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">customer_payment_history</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">daily_business_snapshots</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">daily_cash_flow_report</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">daily_profit_records</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">mobiles</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">monthly_snapshots</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">opening_cash</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">outstanding_payments</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">payments</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">purchase_delete_history</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                                    <li class="text-xs bg-slate-50 border border-slate-200 p-2 rounded flex justify-between">
                                <span class="font-medium text-slate-700">undo_redo_history</span>
                                <span class="text-emerald-600 font-semibold">Active</span>
                            </li>
                                            </ul>
                            </div>
                </div>
</body>
</html>
