<!DOCTYPE html>
<html lang="zh-HK">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meghan x Keira ERP - 登入</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <meta name="theme-color" content="#111827">
    <style>
        body {
            background: #111827;
            background-image: 
                radial-gradient(at 20% 30%, rgba(55, 65, 81, 0.3) 0px, transparent 50%),
                radial-gradient(at 80% 70%, rgba(31, 41, 55, 0.4) 0px, transparent 50%);
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="bg-white p-10 rounded-lg shadow-xl w-full max-w-md">
        <!-- 兩個 LOGO -->
        <div class="flex justify-center items-center gap-6 mb-8">
            <img src="images/logo-galaxy.jpg?v=3" alt="Galaxy" class="h-14 w-auto object-contain">
            <img src="images/logo-expert.png?v=3" alt="Keira" class="h-14 w-auto object-contain">
        </div>

        <div class="text-center mb-8">
            <h1 class="text-2xl font-bold text-gray-900 tracking-tight">Meghan x Keira ERP</h1>
            <p class="text-gray-400 text-sm mt-2">員工管理系統</p>
        </div>

        <form id="loginForm" class="space-y-5">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">員工編號</label>
                <input 
                    type="text" 
                    id="employeeId" 
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900 transition-all text-gray-900"
                    placeholder="例如：andrew.lai"
                >
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">密碼</label>
                <div class="relative">
                    <input 
                        type="password" 
                        id="password" 
                        required
                        class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900 transition-all text-gray-900"
                        placeholder="輸入密碼"
                    >
                    <button type="button" id="togglePassword"
                        onclick="(function(){var i=document.getElementById('password'),b=document.getElementById('togglePassword');if(i.type==='password'){i.type='text';b.textContent='隱藏';}else{i.type='password';b.textContent='顯示';}})()"
                        style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:12px;color:#6b7280;font-weight:500;padding:4px;">
                        顯示
                    </button>
                </div>
            </div>
            <button 
                type="submit"
                id="loginBtn"
                class="w-full bg-gray-900 text-white py-3 rounded-lg font-medium hover:bg-gray-800 transition-colors disabled:bg-gray-400"
            >
                登入
            </button>
        </form>

        <div id="loadingMessage" class="hidden mt-5 p-3 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg text-sm text-center">
            載入中...
        </div>

        <div id="errorMessage" class="hidden mt-5 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>

        <p class="text-center text-gray-300 text-xs mt-10 leading-5">© 2026<br>Meghan Building Construction Limited<br>Keira Hong Kong Limited</p>
    </div>

    <!-- ✅ 使用统一的 auth 模块 -->
    <script src="config.js?v=20260323f"></script>
    <script src="auth.js?v=20260323f"></script>
</body>
</html>
