给现有页面加验证（用代码块）

<div id="captchaOverlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center;z-index:9999;">
    <div class="captcha-modal" style="width:500px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.2);">
        <div style="background:#1677ff;color:white;padding:16px 20px;font-size:20px;display:flex;justify-content:space-between;align-items:center;">
            <span>请完成安全校验</span>
            <button onclick="document.getElementById('captchaOverlay').style.display='none'" style="background:none;border:none;color:white;font-size:26px;cursor:pointer;">&times;</button>
        </div>
        <div style="padding:20px;">
            <div style="position:relative;width:100%;height:260px;background:#0a2b5c;border-radius:4px;overflow:hidden;margin-bottom:20px;">
                <div style="width:100%;height:100%;background:url('https://picsum.photos/500/260?random=1') center/cover no-repeat;"></div>
                <div id="puzzleBlock" style="position:absolute;top:100px;left:160px;width:70px;height:70px;background:url('https://picsum.photos/500/260?random=1') center/cover no-repeat;background-position:-160px -100px;border:2px solid #fff;box-shadow:0 0 10px rgba(0,0,0,0.3);"></div>
                <div style="position:absolute;top:100px;left:320px;width:70px;height:70px;background:rgba(22,119,255,0.3);border:2px dashed #fff;"></div>
                <div id="captchaRefresh" style="position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;justify-content:center;align-items:center;color:white;font-size:18px;cursor:pointer;">↻</div>
            </div>
            <div style="position:relative;width:100%;height:46px;background:#f5f7fa;border-radius:4px;overflow:hidden;">
                <div id="progressBar" style="position:absolute;top:0;left:0;height:100%;width:0;background:#1677ff;opacity:0.3;"></div>
                <div style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;padding-left:50px;color:#999;font-size:16px;">向右拖动滑块填充拼图</div>
                <div id="sliderBtn" style="position:absolute;top:0;left:0;width:50px;height:100%;background:#fff;border:2px solid #1677ff;border-radius:4px;display:flex;justify-content:center;align-items:center;cursor:pointer;">
                    <span style="font-size:20px;color:#1677ff;">→</span>
                </div>
            </div>
            <div id="captchaStatus" style="text-align:center;margin-top:12px;font-size:15px;display:none;"></div>
        </div>
    </div>
</div>

<script>
(function(){
    const overlay = document.getElementById('captchaOverlay');
    const puzzleBlock = document.getElementById('puzzleBlock');
    const sliderBtn = document.getElementById('sliderBtn');
    const progressBar = document.getElementById('progressBar');
    const captchaStatus = document.getElementById('captchaStatus');
    const captchaRefresh = document.getElementById('captchaRefresh');
    const maskLeft = 320;
    const tolerance = 6;
    let isDragging = false, startX = 0, currentLeft = 0;

    function resetCaptcha(){
        puzzleBlock.style.left = '160px';
        sliderBtn.style.left = '0';
        progressBar.style.width = '0';
        captchaStatus.style.display = 'none';
        isDragging = false;
        currentLeft = 0;
    }

    sliderBtn.addEventListener('mousedown', function(e){
        isDragging = true;
        startX = e.clientX;
        sliderBtn.style.transition = 'none';
        puzzleBlock.style.transition = 'none';
    });

    document.addEventListener('mousemove', function(e){
        if(!isDragging) return;
        const moveX = e.clientX - startX;
        currentLeft = Math.max(0, Math.min(moveX, sliderBtn.parentElement.offsetWidth - 50));
        sliderBtn.style.left = currentLeft + 'px';
        progressBar.style.width = currentLeft + 'px';
        const scale = (maskLeft - 160) / (sliderBtn.parentElement.offsetWidth - 50);
        puzzleBlock.style.left = (160 + currentLeft * scale) + 'px';
    });

    document.addEventListener('mouseup', function(){
        if(!isDragging) return;
        isDragging = false;
        sliderBtn.style.transition = 'left 0.3s ease';
        puzzleBlock.style.transition = 'left 0.3s ease';

        const scale = (maskLeft - 160) / (sliderBtn.parentElement.offsetWidth - 50);
        const puzzlePos = 160 + currentLeft * scale;

        if(Math.abs(puzzlePos - maskLeft) < tolerance){
            captchaStatus.textContent = '✅ 验证成功';
            captchaStatus.style.color = '#52c41a';
            captchaStatus.style.display = 'block';
            setTimeout(() => overlay.style.display = 'none', 500);
        }else{
            captchaStatus.textContent = '❌ 验证失败，请重试';
            captchaStatus.style.color = '#ff4d4f';
            captchaStatus.style.display = 'block';
            setTimeout(resetCaptcha, 1000);
        }
    });

    captchaRefresh.addEventListener('click', resetCaptcha);
})();
</script>