<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>安全验证 - eascs.com</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", "PingFang SC", Arial, sans-serif;
        }
        body {
            background: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }
        .verify-container {
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 40px 20px;
            width: 100%;
            max-width: 480px;
            text-align: center;
        }
        .verify-icon {
            font-size: 60px;
            color: #0078d7;
            margin-bottom: 20px;
        }
        .verify-title {
            font-size: 20px;
            color: #1d2129;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .verify-desc {
            font-size: 14px;
            color: #4e5969;
            margin-bottom: 25px;
            line-height: 1.6;
        }

        /* 滑块验证核心样式（适配手机） */
        .slider-wrap {
            width: 100%;
            height: 50px;
            position: relative;
            margin-bottom: 20px;
            border-radius: 8px;
            background: #f5f7fa;
            overflow: hidden;
            touch-action: none; /* 禁止移动端触摸默认行为 */
        }
        .slider-track {
            width: 100%;
            height: 100%;
            position: relative;
            cursor: pointer;
        }
        .slider-btn {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            background: #0078d7;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 18px;
            box-shadow: 0 2px 8px rgba(0, 120, 215, 0.3);
            transition: transform 0.2s ease;
            z-index: 10;
            -webkit-tap-highlight-color: transparent; /* 去掉手机点击高亮 */
        }
        .slider-btn:hover {
            transform: scale(1.05);
        }
        .slider-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: rgba(0, 120, 215, 0.1);
            z-index: 5;
            width: 0;
            transition: width 0.1s linear;
        }
        .slider-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            color: #4e5969;
            z-index: 1;
        }

        .loading {
            display: none;
            margin-top: 20px;
            color: #4e5969;
            font-size: 14px;
        }
        .loading span {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #0078d7;
            margin: 0 3px;
            animation: loading 1s infinite alternate;
        }
        .loading span:nth-child(2) {
            animation-delay: 0.2s;
        }
        .loading span:nth-child(3) {
            animation-delay: 0.4s;
        }
        @keyframes loading {
            from { opacity: 0.4; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1.2); }
        }
        .verify-success {
            color: #00b42a;
            display: none;
            margin-top: 20px;
            font-size: 14px;
        }
        .verify-error {
            color: #f53f3f;
            display: none;
            margin-top: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="verify-container">
        <div class="verify-icon">🛡️</div>
        <h2 class="verify-title">网站安全验证</h2>
        <p class="verify-desc">为保障eascs.com的访问安全，请拖动滑块完成验证</p>
        
        <!-- 滑块验证区域 -->
        <div class="slider-wrap">
            <div class="slider-progress" id="sliderProgress"></div>
            <div class="slider-text" id="sliderText">拖动滑块完成验证</div>
            <div class="slider-track" id="sliderTrack">
                <div class="slider-btn" id="sliderBtn">➡️</div>
            </div>
        </div>

        <div class="loading" id="loading">
            验证中，请稍候...
            <span></span><span></span><span></span>
        </div>
        <div class="verify-success" id="verifySuccess">✅ 验证成功，即将跳转...</div>
        <div class="verify-error" id="verifyError">❌ 验证失败，请重新拖动滑块</div>
    </div>

    <script>
        // 滑块验证核心逻辑（适配电脑+手机）
        const sliderTrack = document.getElementById('sliderTrack');
        const sliderBtn = document.getElementById('sliderBtn');
        const sliderProgress = document.getElementById('sliderProgress');
        const sliderText = document.getElementById('sliderText');
        const loading = document.getElementById('loading');
        const verifySuccess = document.getElementById('verifySuccess');
        const verifyError = document.getElementById('verifyError');

        let isDragging = false;
        let startX = 0;
        let wrapWidth = sliderTrack.offsetWidth;
        let btnWidth = sliderBtn.offsetWidth;
        let maxLeft = wrapWidth - btnWidth; // 滑块最大可拖动距离

        // 初始化（适配窗口大小变化）
        window.addEventListener('resize', () => {
            wrapWidth = sliderTrack.offsetWidth;
            btnWidth = sliderBtn.offsetWidth;
            maxLeft = wrapWidth - btnWidth;
        });

        // ========== 核心修复：同时监听鼠标+触摸事件 ==========
        // 1. 开始操作（鼠标按下/手指触摸）
        function startHandler(e) {
            e.preventDefault(); // 阻止手机默认行为（比如页面滚动）
            isDragging = true;
            // 区分鼠标/触摸事件的坐标
            const clientX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
            startX = clientX - sliderBtn.offsetLeft;
            
            sliderBtn.style.transition = 'none';
            sliderProgress.style.transition = 'none';
            // 隐藏提示
            verifyError.style.display = 'none';
            verifySuccess.style.display = 'none';
        }

        // 2. 拖动操作（鼠标移动/手指滑动）
        function moveHandler(e) {
            if (!isDragging) return;
            e.preventDefault(); // 阻止手机滑动时页面滚动
            // 区分鼠标/触摸事件的坐标
            const clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
            
            let left = clientX - startX;
            // 限制拖动范围
            if (left < 0) left = 0;
            if (left > maxLeft) left = maxLeft;
            // 更新滑块位置和进度条
            sliderBtn.style.left = left + 'px';
            sliderProgress.style.width = (left + btnWidth) + 'px';
            // 更新提示文字
            const percent = Math.round((left / maxLeft) * 100);
            sliderText.innerText = `拖动滑块完成验证 (${percent}%)`;
        }

        // 3. 结束操作（鼠标松开/手指离开）
        function endHandler(e) {
            if (!isDragging) return;
            isDragging = false;
            const currentLeft = parseInt(sliderBtn.style.left || 0);
            
            // 验证是否拖动到终点（95%以上视为完成）
            if (currentLeft / maxLeft >= 0.95) {
                // 滑块拖到终点，开始后端验证
                sliderText.innerText = '验证中...';
                sliderBtn.style.left = maxLeft + 'px';
                sliderProgress.style.width = wrapWidth + 'px';
                sliderBtn.style.pointerEvents = 'none'; // 禁用滑块
                loading.style.display = 'block';
                
                // 调用verify.php生成Token（原有逻辑不变）
                fetch("/verify/verify.php", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    body: JSON.stringify({
                        action: "verify_human",
                        domain: "eascs.com"
                    })
                }).then(res => {
                    if (!res.ok) throw new Error("网络请求失败");
                    return res.json();
                }).then(data => {
                    if (data.success) {
                        // 验证成功：设置HTTPS安全Cookie
                        document.cookie = `verify_token=${data.token}; path=/; max-age=3600; SameSite=Strict; Secure`;
                        // 显示成功提示，延迟跳转
                        loading.style.display = 'none';
                        verifySuccess.style.display = 'block';
                        sliderText.innerText = '验证成功！';
                        // 跳回原访问路径
                        const redirectUrl = new URLSearchParams(window.location.search).get('redirect') || '/';
                        setTimeout(() => {
                            window.location.href = `https://www.eascs.com${redirectUrl}`;
                        }, 1000);
                    } else {
                        throw new Error(data.msg || "验证失败");
                    }
                }).catch(err => {
                    console.error("验证出错：", err);
                    // 验证失败，重置滑块
                    loading.style.display = 'none';
                    verifyError.style.display = 'block';
                    resetSlider();
                });
            } else {
                // 未拖到终点，重置滑块
                verifyError.style.display = 'block';
                resetSlider();
            }
        }

        // 绑定事件（电脑+手机）
        // 鼠标事件
        sliderBtn.addEventListener('mousedown', startHandler);
        document.addEventListener('mousemove', moveHandler);
        document.addEventListener('mouseup', endHandler);
        // 触摸事件（手机）
        sliderBtn.addEventListener('touchstart', startHandler);
        document.addEventListener('touchmove', moveHandler);
        document.addEventListener('touchend', endHandler);

        // 重置滑块状态
        function resetSlider() {
            sliderBtn.style.transition = 'all 0.3s ease';
            sliderProgress.style.transition = 'width 0.3s ease';
            sliderBtn.style.left = '0px';
            sliderProgress.style.width = '0px';
            sliderText.innerText = '拖动滑块完成验证';
            sliderBtn.style.pointerEvents = 'auto'; // 启用滑块
        }

        // 防止刷新页面重复验证
        window.onbeforeunload = function() {
            resetSlider();
            loading.style.display = 'none';
            verifySuccess.style.display = 'none';
            verifyError.style.display = 'none';
        };

        // 禁止右键/选中/触摸高亮
        sliderTrack.oncontextmenu = () => false;
        sliderBtn.onselectstart = () => false;
    </script>
</body>
</html>
