Administrator
4 hours ago b379a9a24654b436165f790652a2edaf5d37020a
feat(frontend): 添加地理区域访问限制页面

- 创建 geo-block.html 页面用于显示访问受限提示
- 设计响应式布局支持移动端和桌面端显示
- 添加动态盾牌图标和脉冲动画效果
- 实现中英双语访问受限提示信息
- 集成网格背景和现代化UI设计元素
- 添加红色警示配色方案和视觉反馈效果
1 files added
139 ■■■■■ changed files
src/main/resources/static/geo-block.html 139 ●●●●● patch | view | raw | blame | history
src/main/resources/static/geo-block.html
New file
@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访问受限</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", sans-serif;
            background: #0a0e27;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #c8d6e5;
        }
        .grid-bg {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-image:
                linear-gradient(rgba(59,130,246,.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(59,130,246,.04) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
        }
        .card {
            position: relative;
            text-align: center;
            padding: 60px 40px;
            max-width: 560px;
            width: 90%;
        }
        .shield-wrap {
            position: relative;
            width: 90px; height: 108px;
            margin: 0 auto 30px;
        }
        .shield-wrap svg {
            width: 100%; height: 100%;
        }
        .shield-ring {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%,-50%);
            width: 150px; height: 150px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(239,68,68,.15) 0%, transparent 70%);
            animation: ringPulse 2.5s ease-in-out infinite;
        }
        @keyframes ringPulse {
            0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .5; }
            50%     { transform: translate(-50%,-50%) scale(1.25); opacity: .15; }
        }
        h2 {
            font-size: 22px; font-weight: 600;
            color: #f1f5f9;
            margin-bottom: 14px;
            letter-spacing: .5px;
        }
        h2.en {
            color: #94a3b8;
            margin-bottom: 30px;
            font-weight: 400;
        }
        .divider {
            width: 60px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(239,68,68,.4), transparent);
            margin: 0 auto 28px;
        }
        .badge {
            display: inline-flex;
            align-items: center; gap: 8px;
            padding: 10px 22px;
            background: rgba(239,68,68,.08);
            border: 1px solid rgba(239,68,68,.2);
            border-radius: 50px;
            font-size: 13px; color: #f87171;
            letter-spacing: 2px;
            font-weight: 500;
        }
        .badge .dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: #ef4444;
            box-shadow: 0 0 8px rgba(239,68,68,.7);
            animation: blink 2s ease-in-out infinite;
        }
        @keyframes blink {
            0%,100% { opacity: 1; }
            50%     { opacity: .3; }
        }
    </style>
</head>
<body>
<div class="grid-bg"></div>
<div class="card">
    <!-- 盾牌图标 -->
    <div class="shield-wrap">
        <div class="shield-ring"></div>
        <svg viewBox="0 0 60 72" fill="none">
            <path d="M30 4 L54 16 L54 38 C54 52 42 62 30 68 C18 62 6 52 6 38 L6 16 Z"
                  stroke="#ef4444" stroke-width="2.2" stroke-linejoin="round"/>
            <path d="M22 36 L28 43 L40 30" stroke="#ef4444" stroke-width="2.8"
                  stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </div>
    <!-- 中文提示 -->
    <h2>因平台安全与合规要求,暂不支持中国大陆 IP 访问</h2>
    <!-- 英文提示 -->
    <h2 class="en">Access from Mainland China is currently unavailable.</h2>
    <div class="divider"></div>
    <!-- 底部标识 -->
    <div class="badge">
        <span class="dot"></span>
        防御平台
    </div>
</div>
</body>
</html>