<?php include('config.php'); ?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
.login-box {
    width: 320px; /* 稍微加宽容器 */
    margin: 50px auto;
    padding: 40px;
    border: 1px solid #ddd;
    border-radius: 10px; /* 增加圆角 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 添加阴影 */
    background: #fff;
}

.login-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: #4CAF50; /* 更醒目的颜色 */
    border: none;
    border-radius: 25px; /* 胶囊形状 */
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase; /* 字母大写 */
    letter-spacing: 1px;
}

.login-btn:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.login-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* 移动端适配 */
@media (max-width: 480px) {
    .login-box {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }
    
    .login-btn {
        padding: 10px;
        font-size: 14px;
    }
}
</style>
</head>
<body>
    <div class="login-box">
    <h2 style="text-align:center; margin-bottom:30px;">卖家登录2</h2>
    <form class="login-form">
        <input type="text" name="username" placeholder="用户名" required 
               style="padding:12px; margin:10px 0; border:1px solid #ddd; border-radius:5px;">
               
        <input type="password" name="password" placeholder="密码" required 
               style="padding:12px; margin:10px 0; border:1px solid #ddd; border-radius:5px;">
        
        <button type="submit" class="login-btn">立即登录</button>
        
        <div class="error-message" style="color:#ff4444; font-size:14px; min-height:20px;"></div>
        
        <div style="margin-top:30px; text-align:center;">
            <p style="color:#666; margin:15px 0;">题库代理申请</p>
            <p style="font-weight:bold; color:#333;">
                <img src="wechat-icon.png" alt="微信" width="20" style="vertical-align:middle;">
                微信：15669155558
            </p>
            <div style="text-align:center;">
            <a href="/8888/" class="back-link">返回自选列表</a>
        		</div>
        </div>
    </form>
</div>

    <script>
    document.querySelector('.login-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const errorDiv = document.querySelector('.error-message');
        errorDiv.textContent = '';
        
        try {
            const formData = new FormData(this);
            
            const response = await fetch('do.php?action=login', {
                method: 'POST',
                body: formData,
                headers: {
                    'Cache-Control': 'no-cache'
                }
            });

            // 强制校验响应类型
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                throw new Error('无效的响应格式');
            }

            const data = await response.json();
            
            if(data.status === 'success') {
                // 添加跳转延迟观察
                console.log('跳转至:', data.redirect);
                window.location.href = data.redirect;
            } else {
                errorDiv.textContent = data.message || '登录失败';
            }
        } catch (error) {
            console.error('登录错误:', error);
            errorDiv.textContent = `登录失败: ${error.message}`;
        }
    });
    </script>
</body>
</html>