<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>安全访问拦截</title>

<style>
*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:#111827;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:15px;
}

.box{
    width:460px;
    max-width:100%;
    background:#1f2937;
    border:1px solid #374151;
    border-radius:12px;
    padding:26px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.icon{
    width:64px;
    height:64px;
    margin:auto;
    border-radius:50%;
    border:2px solid #ef4444;
    color:#ef4444;
    font-size:34px;
    line-height:60px;
    font-weight:bold;
}

h2{
    margin:18px 0 10px;
    font-size:24px;
}

p{
    color:#9ca3af;
    font-size:14px;
    line-height:24px;
    margin:0;
}

.info{
    margin-top:20px;
    text-align:left;
    background:#111827;
    padding:14px;
    border-radius:8px;
    border:1px solid #374151;
}

.info div{
    margin:7px 0;
    font-size:13px;
    color:#d1d5db;
}

.info span{
    color:#5eead4;
}

.game-title{
    margin-top:22px;
    margin-bottom:10px;
    font-size:15px;
    color:#f9fafb;
}

.game-wrap{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
}

canvas{
    background:#020617;
    border:1px solid #374151;
    border-radius:8px;
    max-width:100%;
}

.score{
    margin-top:10px;
    font-size:14px;
    color:#facc15;
}

.game-tip{
    margin-top:8px;
    font-size:12px;
    color:#9ca3af;
}

.btns{
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.btns button,
.main-btn{
    height:40px;
    border:0;
    border-radius:6px;
    background:#ef4444;
    color:#fff;
    cursor:pointer;
    font-size:14px;
}

.btns button{
    background:#374151;
}

.btns button:hover,
.main-btn:hover{
    opacity:.9;
}

.empty{
    visibility:hidden;
}

.main-btn{
    margin-top:14px;
    width:100%;
}

.footer{
    margin-top:16px;
    font-size:11px;
    color:#6b7280;
}
</style>
</head>

<body>

<div class="box">

    <div class="icon">!</div>

    <h2>访问受限</h2>

    <p>
        系统检测到当前请求存在异常，访问已被安全策略拦截。
    </p>

    <div class="info">
        <div>编号：<span id="id"></span></div>
        <div>时间：<span id="time"></span></div>
        <div>浏览器：<span id="ua"></span></div>
        <div>状态：<span>Security Violation</span></div>
    </div>

    <div class="game-title">安全验证小游戏：贪食蛇</div>

    <div class="game-wrap">
        <canvas id="snake" width="320" height="320"></canvas>
    </div>

    <div class="score">
        分数：<span id="score">0</span>
    </div>

    <div class="game-tip">
        电脑使用方向键 / WASD 控制，手机可点击下方按钮。
    </div>

    <div class="btns">
        <button class="empty">空</button>
        <button onclick="changeDirection('up')">上</button>
        <button class="empty">空</button>

        <button onclick="changeDirection('left')">左</button>
        <button onclick="restartGame()">重开</button>
        <button onclick="changeDirection('right')">右</button>

        <button class="empty">空</button>
        <button onclick="changeDirection('down')">下</button>
        <button class="empty">空</button>
    </div>

    <button onclick="location.reload()" class="main-btn">重新尝试访问</button>

    <div class="footer">Secure Shield Engine v4.0</div>

</div>

<script>
document.getElementById("id").innerHTML =
    "WAF-" + Math.random().toString(36).substr(2,8).toUpperCase();

function updateTime(){
    document.getElementById("time").innerHTML =
        new Date().toLocaleString();
}

updateTime();
setInterval(updateTime,1000);

var ua = navigator.userAgent;
var browser = "Unknown";

if(/Edg/i.test(ua)){
    browser = "Edge";
}else if(/Chrome/i.test(ua)){
    browser = "Chrome";
}else if(/Firefox/i.test(ua)){
    browser = "Firefox";
}else if(/Safari/i.test(ua)){
    browser = "Safari";
}else if(/MSIE|Trident/i.test(ua)){
    browser = "IE";
}

document.getElementById("ua").innerHTML = browser;
</script>

<script>
var canvas = document.getElementById("snake");
var ctx = canvas.getContext("2d");

var boxSize = 16;
var rows = canvas.height / boxSize;
var cols = canvas.width / boxSize;

var snake;
var food;
var direction;
var nextDirection;
var score;
var gameOver;
var timer;

function initGame(){
    snake = [
        {x:8,y:10},
        {x:7,y:10},
        {x:6,y:10}
    ];

    direction = "right";
    nextDirection = "right";
    score = 0;
    gameOver = false;

    document.getElementById("score").innerHTML = score;

    createFood();
    draw();

    clearInterval(timer);
    timer = setInterval(gameLoop,130);
}

function createFood(){
    food = {
        x:Math.floor(Math.random() * cols),
        y:Math.floor(Math.random() * rows)
    };

    for(var i=0;i<snake.length;i++){
        if(snake[i].x === food.x && snake[i].y === food.y){
            createFood();
            return;
        }
    }
}

function draw(){
    ctx.fillStyle = "#020617";
    ctx.fillRect(0,0,canvas.width,canvas.height);

    ctx.strokeStyle = "#111827";
    for(var i=0;i<=cols;i++){
        ctx.beginPath();
        ctx.moveTo(i * boxSize,0);
        ctx.lineTo(i * boxSize,canvas.height);
        ctx.stroke();
    }

    for(var j=0;j<=rows;j++){
        ctx.beginPath();
        ctx.moveTo(0,j * boxSize);
        ctx.lineTo(canvas.width,j * boxSize);
        ctx.stroke();
    }

    ctx.fillStyle = "#ef4444";
    ctx.fillRect(
        food.x * boxSize + 2,
        food.y * boxSize + 2,
        boxSize - 4,
        boxSize - 4
    );

    for(var k=0;k<snake.length;k++){
        if(k === 0){
            ctx.fillStyle = "#22c55e";
        }else{
            ctx.fillStyle = "#16a34a";
        }

        ctx.fillRect(
            snake[k].x * boxSize + 2,
            snake[k].y * boxSize + 2,
            boxSize - 4,
            boxSize - 4
        );
    }

    if(gameOver){
        ctx.fillStyle = "rgba(0,0,0,.65)";
        ctx.fillRect(0,0,canvas.width,canvas.height);

        ctx.fillStyle = "#fff";
        ctx.font = "22px Arial";
        ctx.textAlign = "center";
        ctx.fillText("游戏结束",canvas.width / 2,canvas.height / 2 - 10);

        ctx.font = "14px Arial";
        ctx.fillText("点击重开继续",canvas.width / 2,canvas.height / 2 + 18);
    }
}

function gameLoop(){
    if(gameOver){
        return;
    }

    direction = nextDirection;

    var head = {
        x:snake[0].x,
        y:snake[0].y
    };

    if(direction === "up"){
        head.y--;
    }else if(direction === "down"){
        head.y++;
    }else if(direction === "left"){
        head.x--;
    }else if(direction === "right"){
        head.x++;
    }

    if(
        head.x < 0 ||
        head.y < 0 ||
        head.x >= cols ||
        head.y >= rows
    ){
        endGame();
        return;
    }

    for(var i=0;i<snake.length;i++){
        if(head.x === snake[i].x && head.y === snake[i].y){
            endGame();
            return;
        }
    }

    snake.unshift(head);

    if(head.x === food.x && head.y === food.y){
        score++;
        document.getElementById("score").innerHTML = score;
        createFood();
    }else{
        snake.pop();
    }

    draw();
}

function endGame(){
    gameOver = true;
    clearInterval(timer);
    draw();
}

function changeDirection(dir){
    if(dir === "up" && direction !== "down"){
        nextDirection = "up";
    }

    if(dir === "down" && direction !== "up"){
        nextDirection = "down";
    }

    if(dir === "left" && direction !== "right"){
        nextDirection = "left";
    }

    if(dir === "right" && direction !== "left"){
        nextDirection = "right";
    }
}

function restartGame(){
    initGame();
}

document.addEventListener("keydown",function(e){
    if(e.key === "ArrowUp" || e.key.toLowerCase() === "w"){
        changeDirection("up");
    }

    if(e.key === "ArrowDown" || e.key.toLowerCase() === "s"){
        changeDirection("down");
    }

    if(e.key === "ArrowLeft" || e.key.toLowerCase() === "a"){
        changeDirection("left");
    }

    if(e.key === "ArrowRight" || e.key.toLowerCase() === "d"){
        changeDirection("right");
    }

    if(e.key === "Enter"){
        restartGame();
    }
});

canvas.addEventListener("click",function(){
    if(gameOver){
        restartGame();
    }
});

initGame();
</script>

<script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?9e1e4ad16c98a54a31a73120134e65bd";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>