<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧门户 - 登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        accent: '#FFD166',
                        darkBlue: '#0F172A',
                        lightBlue: '#E0F2FE',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .bg-gradient-tech {
                background: linear-gradient(135deg, #0F172A 0%, #1E40AF 50%, #3B82F6 100%);
            }

            .bg-glass {
                background: rgba(255, 255, 255, 0.08);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
            }

            .bg-glass-hover {
                background: rgba(255, 255, 255, 0.12);
                transition: background 0.3s ease;
            }

            .text-shadow {
                text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
            }

            .modal-backdrop {
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }

            .input-focus-ring {
                box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.4);
            }
        }

        /* 动画优化 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: scale(1);
            }
            to {
                opacity: 0;
                transform: scale(0.95);
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-8px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        .error-modal {
            animation: fadeIn 0.3s ease-out forwards;
        }

        .error-modal.hide {
            animation: fadeOut 0.3s ease-in forwards;
        }

        .feature-card {
            animation: float 4s ease-in-out infinite;
        }

        .feature-card:nth-child(2) {
            animation-delay: 1s;
        }

        .feature-card:nth-child(3) {
            animation-delay: 2s;
        }
    </style>
</head>
<body class="font-inter min-h-screen flex items-center justify-center p-4 md:p-0 overflow-x-hidden">
<!-- 背景优化 - 增加渐变叠加层让背景图更协调 -->
<div class="fixed inset-0 bg-gradient-tech z-0"></div>
<!-- 科技感装饰元素 -->
<div class="fixed inset-0 z-0 overflow-hidden opacity-20">
    <div class="absolute top-1/4 left-1/4 w-96 h-96 rounded-full bg-primary/30 blur-3xl"></div>
    <div class="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full bg-accent/20 blur-3xl"></div>
</div>

<!-- 错误提示弹窗 (默认隐藏) -->
<div id="errorModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
    <div class="absolute inset-0 bg-darkBlue/80 modal-backdrop" id="modalBackdrop"></div>
    <div class="relative bg-white/15 backdrop-blur-xl border border-white/25 rounded-xl p-6 w-full max-w-md shadow-2xl error-modal transform transition-all">
        <div class="text-center mb-4">
            <div class="w-16 h-16 mx-auto bg-red-500/20 rounded-full flex items-center justify-center mb-4">
                <i class="fa fa-exclamation-triangle text-red-400 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">登录失败</h3>
            <p class="text-white/80" id="modalErrorMessage">账号或密码错误，请重新输入</p>
        </div>
        <button id="closeModal"
                class="w-full mt-4 bg-accent hover:bg-accent/90 text-darkBlue font-medium py-2.5 px-4 rounded-lg transition-all duration-300 shadow-lg shadow-accent/20 hover:shadow-accent/30">
            确定
        </button>
    </div>
</div>

<!-- 登录卡片 - 科技感背景图（协调不突兀） -->
<div class="relative w-full max-w-5xl bg-white/10 backdrop-blur-xl rounded-2xl shadow-2xl overflow-hidden flex flex-col md:flex-row z-10 border border-white/20"
     style="background-image: url('images/login-brand.png'); background-size: cover; background-position: center; background-blend-mode: overlay;">
    <!-- 左侧品牌区域 - 半透明遮罩提升可读性 -->
    <div class="p-6 md:p-10 lg:p-12 flex-1 flex flex-col justify-between bg-darkBlue/40 backdrop-blur-sm">
        <div>
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-white text-shadow mb-6">智慧门户</h2>
            <p class="text-white/90 text-base md:text-lg max-w-md leading-relaxed">
                一站式智能管理平台，融合前沿技术，为您提供高效、安全、便捷的服务体验，
                助力数字化转型，创造更大价值
            </p>
        </div>
        <div class="mt-10 md:mt-20 space-y-6">
            <div class="bg-glass bg-glass-hover p-5 rounded-xl border border-white/10 hover:border-white/30 transition-all duration-300 feature-card">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center text-accent">
                        <i class="fa fa-shield text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-lg text-white">安全可靠</h3>
                        <p class="text-white/70 text-sm">多重加密保障数据安全</p>
                    </div>
                </div>
            </div>
            <div class="bg-glass bg-glass-hover p-5 rounded-xl border border-white/10 hover:border-white/30 transition-all duration-300 feature-card">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center text-secondary">
                        <i class="fa fa-bolt text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-lg text-white">高效便捷</h3>
                        <p class="text-white/70 text-sm">智能服务提升工作效率</p>
                    </div>
                </div>
            </div>
            <div class="bg-glass bg-glass-hover p-5 rounded-xl border border-white/10 hover:border-white/30 transition-all duration-300 feature-card">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                        <i class="fa fa-cubes text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-lg text-white">智能互联</h3>
                        <p class="text-white/70 text-sm">全方位数据互通互联</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-10 md:mt-16 text-center md:text-left text-white/60 text-sm">
            <p>&copy; 2025 智慧门户 版权所有</p>
        </div>
    </div>

    <!-- 右侧登录表单区域 - 增强遮罩确保表单清晰 -->
    <div class="flex-1 p-6 md:p-10 lg:p-12 bg-darkBlue/60 backdrop-blur-xl border-l border-white/20 flex flex-col justify-center">
        <div class="max-w-md mx-auto w-full">
            <div class="text-center md:text-left mb-10">
                <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4 text-white text-shadow">账户登录</h1>
                <p class="text-white/70">欢迎回来，请输入您的账号信息</p>
            </div>

            <form id="loginForm" class="space-y-6">
                <!-- 用户名输入 -->
                <div class="space-y-3">
                    <label for="username" class="block text-sm font-medium text-white/80">账号</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fa fa-user text-white/50"></i>
                        </div>
                        <input type="text" id="username" name="username"
                               class="block w-full pl-12 pr-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:border-accent focus:input-focus-ring text-white placeholder-white/40 transition-all duration-300 outline-none"
                               placeholder="请输入账号" required>
                    </div>
                </div>

                <!-- 密码输入 -->
                <div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <label for="password" class="block text-sm font-medium text-white/80">密码</label>
                    </div>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-white/50"></i>
                        </div>
                        <input type="password" id="password" name="password"
                               class="block w-full pl-12 pr-12 py-3 bg-white/10 border border-white/20 rounded-lg focus:border-accent focus:input-focus-ring text-white placeholder-white/40 transition-all duration-300 outline-none"
                               placeholder="请输入密码" required>
                        <button type="button" id="togglePassword"
                                class="absolute inset-y-0 right-0 pr-4 flex items-center text-white/50 hover:text-white transition-colors">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                </div>

                <!-- 记住密码 -->
                <div class="flex items-center">
                    <input id="remember" name="remember" type="checkbox"
                           class="h-5 w-5 text-accent focus:ring-accent border-white/30 rounded transition-colors bg-white/10">
                    <label for="remember" class="ml-3 block text-sm text-white/70">
                        记住我 30 天
                    </label>
                </div>

                <!-- 登录按钮 -->
                <button type="submit"
                        class="w-full bg-accent hover:bg-accent/90 text-darkBlue font-medium py-3 px-4 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:ring-offset-2 focus:ring-offset-white/10 shadow-lg shadow-accent/20 hover:shadow-accent/30 transform hover:-translate-y-0.5 active:translate-y-0">
                    登录
                </button>
            </form>
        </div>
    </div>
</div>

<script>

    if (window.self !== window.top) {
        // 跳转到顶层窗口，强制取消嵌套
        window.top.location.href = window.self.location.href;
    }


    // 密码显示/隐藏切换
    const togglePassword = document.getElementById('togglePassword');
    const password = document.getElementById('password');
    togglePassword.addEventListener('click', () => {
        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
        const icon = togglePassword.querySelector('i');
        icon.classList.toggle('fa-eye');
        icon.classList.toggle('fa-eye-slash');
    });

    // 错误弹窗相关元素
    const errorModal = document.getElementById('errorModal');
    const closeModal = document.getElementById('closeModal');
    const modalBackdrop = document.getElementById('modalBackdrop');
    const modalErrorMessage = document.getElementById('modalErrorMessage');

    // 显示错误弹窗
    function showErrorModal(message = '账号或密码错误，请重新输入') {
        modalErrorMessage.textContent = message;
        errorModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    // 隐藏错误弹窗
    function hideErrorModal() {
        const modal = errorModal.querySelector('.error-modal');
        modal.classList.add('hide');
        setTimeout(() => {
            errorModal.classList.add('hidden');
            modal.classList.remove('hide');
            document.body.style.overflow = '';
        }, 300);
    }

    // 关闭弹窗事件绑定
    closeModal.addEventListener('click', hideErrorModal);
    modalBackdrop.addEventListener('click', hideErrorModal);
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !errorModal.classList.contains('hidden')) {
            hideErrorModal();
        }
    });

    // 表单提交处理
    const loginForm = document.getElementById('loginForm');
    loginForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        // 获取表单数据
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value.trim();
        const remember = document.getElementById('remember').checked;

        // 简单表单验证
        if (!username || !password) {
            showErrorModal('账号和密码不能为空');
            return;
        }

        // 模拟登录加载状态
        const submitButton = loginForm.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 登录中...';

        try {
            // 发送登录请求到后端（替换为实际接口地址）
            const response = await fetch('biz/userLogin', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({username, password, remember}),
                credentials: 'include'
            });

            const result = await response.json();
            console.log(result)
            if (response.ok && result.success) {
                // 登录成功，跳转到首页（替换为实际首页路径）
                window.location.href = 'biz/index';
            } else {
                // 登录失败，显示错误信息
                showErrorModal(result.message || '账号或密码错误，请重新输入');
            }
        } catch (error) {
            // 网络错误处理
            console.error('登录请求失败:', error);
            showErrorModal('网络异常，请检查网络连接后重试');
        } finally {
            // 恢复按钮状态
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
        }
    });

    // 输入框交互优化（聚焦时轻微上浮效果）
    const inputs = document.querySelectorAll('input');
    inputs.forEach(input => {
        input.addEventListener('focus', () => {
            input.parentElement.classList.add('scale-[1.02]', 'transition-transform', 'duration-300');
        });
        input.addEventListener('blur', () => {
            input.parentElement.classList.remove('scale-[1.02]');
        });
    });
</script>
</body>
</html>